<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<script src="/static/admin/ueditor/ueditor.config.js"></script>
<script src="/static/admin/ueditor/ueditor.all.min.js"></script>
<script src="/static/admin/ueditor/lang/zh-cn/zh-cn.js"></script>
<link rel="stylesheet" type="text/css" href="/static/admin/ueditor/themes/default/css/ueditor.css"/>
<link rel="stylesheet" href="/static/admin/ueditor/third-party/video-js/video-js.min.css">
<script type="text/javascript" src="/static/admin/ueditor/third-party/video-js/video.js"></script>
<script type="text/javascript" src="/static/admin/ueditor/third-party/video-js/video.dev.js"></script>
<script type="text/javascript" src="/static/admin/ueditor/third-party/video-js/video-js.swf"></script>
<script type="text/javascript" src="/static/admin/ueditor/third-party/video-js/video-js.css"></script>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-adsList-add"
			enctype="multipart/form-data">
			<div class="form-group">
				<label class="col-sm-3 control-label">广告标题：</label>
				<div class="col-sm-8">
					<input id="adsListTitle" name="adsListTitle" class="form-control"
						type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">广告封面：</label>
				<div class="col-sm-8">
				<label for="adsListImage" class=" btn btn-success">点击上传</label>
					<input id="adsListImage" type="file" name="file" accept="Image/*" style="display:none"/>
					
					<div id="imageShow"></div>
				</div>
				
			</div>
			<div class="form-group"></div>
			<div class="form-group">
				<label class="col-sm-3 control-label">广告链接：</label>
				<div class="col-sm-8">
					<input id="adsListUrl" name="adsListUrl" class="form-control"
						type="text">
				</div>
			</div>


			<div class="form-group">
				<label class="col-sm-3 control-label">详情：</label>
				<div class="col-sm-8">
				 <textarea name="adsListDetail" id="adsListDetail"  style="width: 400px; height: 200px; margin: 0 auto;"></textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">所属广告位：</label>
				<div class="col-sm-8">
					<select id="getName" name="adsId" class="form-control">
					</select>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">使用状态：</label>
				<div class="col-sm-8">
					<select id="adsListState" name="adsListState" class="form-control">
						<option label="可用" value="0"></option>
						<option label="停用" value="1"></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">

					<input id="remark" name="remark" class="form-control" type="text">
				</div>
			</div>

		</form>

	</div>
	<div th:include="include::footer"></div>
	<script type="text/javascript">
		var prefix = ctx + "gxgw_modules/adsList"
		
		$("#form-adsList-add").validate({
			rules:{
				adsListTitle:{
					required:true
				},
				adsListUrl:{
					required:true
				},
				getName:{
					required:true
				},
				adsListState:{
					required:true
				}
			}
		});
		//图片回显
		 $('#adsListImage').on('change', function() {
		        var reader = new FileReader();
		        reader.onload = function(e) {
		            imgSrc = e.target.result;
		            
		            //根据MIME判断上传的文件是不是图片类型
		            if((imgSrc).indexOf("image/")==-1){
		                $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG,JEPG，PNG后缀的文件。");
		            } else {
		              var html ='<br><img src="'+imgSrc+'" width="470px" height="300px"></img>';
		              $('#imageShow').html(html);
		            }
		        }
		        reader.readAsDataURL(this.files[0]);
		    });


        function submitHandler() {

	        if ($.validate.form()) {
	        	var formData = new FormData($('#form-adsList-add')[0]);

	        	 $.ajax({
	        	        url: prefix+"/add",
	        	        data: formData,
	        	        type: "post",
	        	        async: false,
	        	        processData: false,
	        	        contentType: false,
	        	        
	        	        success: function(result) {
	        	        	$.operate.successCallback(result);
	        	        
	        	        }
	        	    })
	        }
	    } ;
	 
		 adsName();
         function adsName(){
         	$.ajax({
                 type: "post",
                 url:prefix + "/selectAdsName",
                 dataType: "json",
                 success: function(res){
                     if (null != res) {
                        var html= '';
                         Object.keys(res).forEach(function(key){
                             html += '<option value="' + res[key].adsId + '" label="'+ res[key].adsName+'"></option>';
                         });
                         $('#getName').html(html);
                         //必须加，刷新select
                     }}
              });
         }
	</script>
	<script type="text/javascript">
  UE.getEditor('adsListDetail');
   
</script>
</body>
</html>
